<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>纯CSS复杂布局作品集</title>
    <style>
      /* 基础重置与变量定义 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --primary: #3498db;
        --secondary: #2c3e50;
        --accent: #e74c3c;
        --light: #ecf0f1;
        --dark: #2c3e50;
        --success: #27ae60;
        --warning: #f39c12;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        --transition: all 0.3s ease;
        --radius: 8px;
        --spacing: 1rem;
      }

      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: #333;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        max-width: 1400px;
        margin: 0 auto;
      }

      /* 头部样式 */
      header {
        background: var(--secondary);
        color: white;
        padding: 2rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
        text-align: center;
      }

      header::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
        transform: rotate(30deg);
      }

      h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 1;
      }

      .subtitle {
        font-size: 1.2rem;
        font-weight: 300;
        opacity: 0.9;
        position: relative;
        z-index: 1;
        margin-bottom: 1rem;
      }

      .nav-links {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        position: relative;
        z-index: 1;
      }

      .nav-links a {
        color: white;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.1);
        transition: var(--transition);
      }

      .nav-links a:hover {
        background: var(--primary);
        transform: translateY(-3px);
      }

      /* 网格布局展示 */
      .section {
        margin-bottom: 3rem;
      }

      .section-title {
        font-size: 1.8rem;
        color: var(--secondary);
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 3px solid var(--primary);
        display: flex;
        align-items: center;
      }

      .section-title::before {
        content: "■";
        color: var(--primary);
        margin-right: 10px;
        font-size: 1.5rem;
      }

      .grid-layout {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 200px 150px 180px;
        gap: 20px;
        margin-bottom: 2rem;
      }

      .grid-item {
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
      }

      .grid-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }

      .grid-item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary);
      }

      .grid-item:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
        background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
      }

      .grid-item:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1;
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
      }

      .grid-item:nth-child(3) {
        grid-column: 1;
        grid-row: 2 / 4;
        background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
      }

      .grid-item:nth-child(4) {
        grid-column: 2 / 4;
        grid-row: 2;
        background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
      }

      .grid-item:nth-child(5) {
        grid-column: 4;
        grid-row: 2;
        background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
      }

      .grid-item:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
        background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);
      }

      .grid-item:nth-child(7) {
        grid-column: 3 / 5;
        grid-row: 3;
        background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
      }

      .grid-item .number {
        font-size: 3rem;
        font-weight: bold;
        color: var(--secondary);
        margin-bottom: 10px;
      }

      .grid-item .desc {
        text-align: center;
        font-size: 1.1rem;
      }

      /* Flexbox布局展示 */
      .flex-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 2rem;
      }

      .flex-item {
        flex: 1 1 300px;
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 25px;
        display: flex;
        transition: var(--transition);
      }

      .flex-item:hover {
        transform: scale(1.02);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      }

      .flex-icon {
        width: 60px;
        height: 60px;
        background: var(--primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-right: 20px;
        flex-shrink: 0;
      }

      .flex-content h3 {
        margin-bottom: 10px;
        color: var(--secondary);
      }

      /* 定位布局展示 */
      .position-section {
        position: relative;
        height: 500px;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        margin-bottom: 3rem;
      }

      .position-item {
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--radius);
        padding: 20px;
        box-shadow: var(--shadow);
        width: 250px;
        transition: var(--transition);
      }

      .position-item:hover {
        transform: scale(1.05);
        z-index: 10;
        background: white;
      }

      .item-1 {
        top: 10%;
        left: 5%;
      }

      .item-2 {
        top: 25%;
        right: 10%;
      }

      .item-3 {
        bottom: 15%;
        left: 15%;
      }

      .position-item.item-4 {
        bottom: 30%;
        right: 20%;
      }

      /* 粘性定位演示 */
      .sticky-demo {
        position: sticky;
        top: 20px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: var(--radius);
        padding: 20px;
        box-shadow: var(--shadow);
        z-index: 100;
        margin: 2rem 0;
        border-left: 4px solid var(--accent);
        transition: var(--transition);
      }

      .sticky-demo:hover {
        transform: translateX(5px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      }

      .sticky-demo h3 {
        color: var(--secondary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
      }

      .sticky-demo h3::before {
        content: "📌";
        margin-right: 10px;
        font-size: 1.2rem;
      }

      .position-item h3 {
        color: var(--secondary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
      }

      .position-item h3::before {
        content: "◆";
        color: var(--primary);
        margin-right: 10px;
        font-size: 1.2rem;
      }

      /* 多列布局展示 */
      .multi-column {
        columns: 3 300px;
        column-gap: 30px;
        margin-bottom: 3rem;
      }

      .column-item {
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 25px;
        margin-bottom: 30px;
        break-inside: avoid;
        transition: var(--transition);
      }

      .column-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      }

      .column-item h3 {
        color: var(--secondary);
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--primary);
      }

      /* 响应式设计 */
      @media (max-width: 992px) {
        .grid-layout {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: auto;
        }

        .grid-item:nth-child(1) {
          grid-column: 1 / 3;
          grid-row: 1;
        }

        .grid-item:nth-child(2) {
          grid-column: 1 / 3;
          grid-row: 2;
        }

        .grid-item:nth-child(3) {
          grid-column: 1;
          grid-row: 3;
        }

        .grid-item:nth-child(4) {
          grid-column: 1 / 3;
          grid-row: 4;
        }

        .grid-item:nth-child(5) {
          grid-column: 2;
          grid-row: 3;
        }

        .grid-item:nth-child(6) {
          grid-column: 1;
          grid-row: 5;
        }

        .grid-item:nth-child(7) {
          grid-column: 1 / 3;
          grid-row: 6;
        }
      }

      @media (max-width: 768px) {
        .grid-layout {
          grid-template-columns: 1fr;
        }

        .grid-item {
          grid-column: 1 !important;
          grid-row: auto !important;
        }

        .position-section {
          height: auto;
          padding: 20px;
        }

        .position-item {
          position: static !important;
          width: 100%;
          margin-bottom: 20px;
        }

        .multi-column {
          columns: 1;
        }

        .nav-links {
          flex-direction: column;
          align-items: center;
        }
      }

      footer {
        background: var(--secondary);
        color: white;
        text-align: center;
        padding: 2rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        margin-top: 3rem;
      }

      .footer-content {
        max-width: 800px;
        margin: 0 auto;
      }

      .footer-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 20px 0;
      }

      .footer-links a {
        color: white;
        text-decoration: none;
        transition: var(--transition);
      }

      .footer-links a:hover {
        color: var(--primary);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>纯CSS复杂布局作品集</h1>
        <p class="subtitle">探索现代CSS布局技术的强大功能 - 不使用任何JavaScript或第三方库</p>
        <div class="nav-links">
          <a href="#grid">Grid布局</a>
          <a href="#flex">Flexbox</a>
          <a href="#position">定位布局</a>
          <a href="#columns">多列布局</a>
        </div>
      </header>

      <!-- 网格布局展示 -->
      <section class="section" id="grid">
        <h2 class="section-title">CSS Grid布局</h2>
        <div class="grid-layout">
          <div class="grid-item">
            <div class="number">01</div>
            <div class="desc">网格区域跨越两列</div>
          </div>
          <div class="grid-item">
            <div class="number">02</div>
            <div class="desc">响应式网格布局</div>
          </div>
          <div class="grid-item">
            <div class="number">03</div>
            <div class="desc">网格区域跨越多行</div>
          </div>
          <div class="grid-item">
            <div class="number">04</div>
            <div class="desc">嵌套网格布局</div>
          </div>
          <div class="grid-item">
            <div class="number">05</div>
            <div class="desc">网格间隙控制</div>
          </div>
          <div class="grid-item">
            <div class="number">06</div>
            <div class="desc">网格线定位</div>
          </div>
          <div class="grid-item">
            <div class="number">07</div>
            <div class="desc">自适应网格轨道</div>
          </div>
        </div>
        <div class="section-content">
          <p>CSS Grid布局是二维布局系统，可以同时处理行和列，创建复杂的网页布局。它允许开发人员定义网格容器和网格项目，通过指定行和列的大小、位置和对齐方式来控制布局。</p>
        </div>
      </section>

      <!-- Flexbox布局展示 -->
      <section class="section" id="flex">
        <h2 class="section-title">Flexbox布局</h2>
        <div class="flex-layout">
          <div class="flex-item">
            <div class="flex-icon">↔</div>
            <div class="flex-content">
              <h3>响应式设计</h3>
              <p>使用Flexbox创建自适应的布局结构，适应不同屏幕尺寸。</p>
            </div>
          </div>
          <div class="flex-item">
            <div class="flex-icon">↕</div>
            <div class="flex-content">
              <h3>垂直居中</h3>
              <p>轻松实现水平和垂直居中，无需复杂的定位技巧。</p>
            </div>
          </div>
          <div class="flex-item">
            <div class="flex-icon">↩</div>
            <div class="flex-content">
              <h3>灵活排序</h3>
              <p>使用order属性改变元素的视觉顺序，保持DOM结构不变。</p>
            </div>
          </div>
          <div class="flex-item">
            <div class="flex-icon">⇆</div>
            <div class="flex-content">
              <h3>弹性空间</h3>
              <p>flex-grow和flex-shrink属性控制元素的扩展和收缩。</p>
            </div>
          </div>
          <div class="flex-item">
            <div class="flex-icon">↪</div>
            <div class="flex-content">
              <h3>自动换行</h3>
              <p>flex-wrap属性控制元素在容器中自动换行。</p>
            </div>
          </div>
          <div class="flex-item">
            <div class="flex-icon">⇅</div>
            <div class="flex-content">
              <h3>多列布局</h3>
              <p>创建等高的多列布局，无需额外的hack技巧。</p>
            </div>
          </div>
        </div>
        <div class="section-content">
          <p>Flexbox是一维布局模型，非常适合在单个维度（行或列）上分配空间。它提供了强大的对齐和分布空间能力，特别适合组件和小规模布局。</p>
        </div>
      </section>

      <!-- 定位布局展示 -->
      <section class="section" id="position">
        <h2 class="section-title">定位布局</h2>
        <div class="position-section">
          <div class="position-item item-1">
            <h3>绝对定位</h3>
            <p>元素相对于最近的非static定位祖先元素定位，脱离文档流。</p>
          </div>
          <div class="position-item item-2">
            <h3>相对定位</h3>
            <p>元素相对于其正常位置进行定位，不脱离文档流。</p>
          </div>
          <div class="position-item item-3">
            <h3>固定定位</h3>
            <p>元素相对于浏览器窗口定位，滚动时位置不变。</p>
          </div>
          <div class="position-item item-4">
            <h3>绝对定位</h3>
            <p>元素相对于最近的非static定位祖先元素定位，脱离文档流。</p>
          </div>
        </div>
        <div class="section-content">
          <p>CSS定位属性允许控制元素在页面上的位置。position属性有五种值：static、relative、absolute、fixed和sticky。通过结合top、right、bottom和left属性，可以精确控制元素的位置。</p>
        </div>
      </section>

      <!-- 粘性定位演示 -->
      <section class="section">
        <h2 class="section-title">粘性定位演示</h2>
        <div class="sticky-demo">
          <h3>粘性定位效果</h3>
          <p>这个元素使用了 <code>position: sticky</code> 和 <code>top: 20px</code>。当你向下滚动页面时，这个元素会在距离视口顶部20px的位置变为固定定位。</p>
          <p>粘性定位是相对定位和固定定位的混合体。元素在正常文档流中保持相对定位，直到滚动到指定的阈值位置，然后变为固定定位。</p>
        </div>
        
        <div class="section-content">
          <p>粘性定位是现代CSS中非常有用的布局技术，特别适合创建始终可见的导航栏、侧边栏或重要提示信息。</p>
          
          <h3>粘性定位的工作原理</h3>
          <p>粘性定位元素的行为取决于其父容器的滚动状态：</p>
          <ul>
            <li>当元素在视口内时，表现为相对定位</li>
            <li>当元素滚动到指定的阈值（如top: 20px）时，变为固定定位</li>
            <li>当父容器滚动结束时，元素恢复相对定位</li>
          </ul>
          
          <h3>使用场景</h3>
          <p>粘性定位非常适合以下场景：</p>
          <ul>
            <li>页面导航栏在滚动时保持可见</li>
            <li>侧边栏中的重要信息始终可见</li>
            <li>表格的表头在滚动时保持固定</li>
            <li>重要提示信息始终显示在屏幕顶部</li>
          </ul>
          
          <p>通过合理使用粘性定位，可以显著提升用户体验，让重要内容始终可见。</p>
        </div>
      </section>

      <!-- 多列布局展示 -->
      <section class="section" id="columns">
        <h2 class="section-title">多列布局</h2>
        <div class="multi-column">
          <div class="column-item">
            <h3>杂志风格布局</h3>
            <p>多列布局特别适合创建类似杂志或报纸的排版效果。通过CSS columns属性，可以轻松实现内容在多列之间流动的布局。</p>
          </div>
          <div class="column-item">
            <h3>响应式列数</h3>
            <p>使用columns属性可以同时定义列宽和列数。当容器宽度变化时，列数会自动调整以适应可用空间。</p>
          </div>
          <div class="column-item">
            <h3>列间隙与分隔线</h3>
            <p>通过column-gap属性控制列之间的间距，使用column-rule属性添加列分隔线，类似于边框效果。</p>
          </div>
          <div class="column-item">
            <h3>跨列元素</h3>
            <p>使用column-span属性可以让元素跨越所有列，特别适合用于标题或强调内容，创建视觉焦点。</p>
          </div>
          <div class="column-item">
            <h3>内容平衡</h3>
            <p>column-fill属性控制列的内容平衡方式，可以选择自动平衡或顺序填充，实现更美观的布局效果。</p>
          </div>
          <div class="column-item">
            <h3>断点控制</h3>
            <p>break-inside属性控制内容在多列布局中的断点位置，防止元素被分割到不同的列中，保持内容完整性。</p>
          </div>
        </div>
        <div class="section-content">
          <p>CSS多列布局允许内容在多个列中流动，类似于报纸的排版。它特别适用于长文本内容的展示，可以改善阅读体验并节省空间。</p>
          
          <p>多列布局通过<code>columns</code>属性实现，可以指定列数和列宽。当容器宽度变化时，列数会自动调整以适应可用空间。这种布局方式特别适合展示长篇文章、产品列表或任何需要分栏显示的内容。</p>
          
          <p>除了基本的列布局，CSS还提供了丰富的控制选项，包括列间距(<code>column-gap</code>)、列分隔线(<code>column-rule</code>)、跨列元素(<code>column-span</code>)等。这些属性让开发者能够创建更加精细和美观的多列布局。</p>
          
          <p>在实际应用中，多列布局经常与响应式设计结合使用。通过媒体查询，可以在不同屏幕尺寸下调整列数和布局，确保在各种设备上都能提供良好的阅读体验。</p>
          
          <p>需要注意的是，多列布局中的内容会自动在列之间流动，类似于报纸的排版方式。这种自动流动的特性使得多列布局非常适合展示连续性的文本内容，但可能不适合需要精确控制每个元素位置的复杂布局。</p>
        </div>
      </section>
    </div>

    <!-- 额外内容区域，用于测试滚动 -->
      <section class="section">
        <h2 class="section-title">CSS布局技术总结</h2>
        <div class="section-content">
          <p>现代CSS提供了多种强大的布局技术，每种技术都有其独特的优势和适用场景。了解这些技术的特性和最佳实践对于创建响应式、可维护的网页布局至关重要。</p>
          
          <h3>Grid布局的优势</h3>
          <p>CSS Grid是二维布局系统，可以同时处理行和列。它特别适合创建复杂的网格结构，如仪表板、图片库和复杂的页面布局。Grid布局提供了精确的网格线控制、网格区域命名和强大的对齐功能。</p>
          
          <h3>Flexbox的灵活性</h3>
          <p>Flexbox是一维布局模型，专注于在单个轴线上分配空间。它非常适合创建灵活的组件布局、导航菜单和卡片容器。Flexbox的自动空间分配和对齐控制使其成为现代UI开发的必备工具。</p>
          
          <h3>定位技术的精确控制</h3>
          <p>CSS定位技术提供了对元素位置的精确控制。从相对定位到绝对定位，从固定定位到粘性定位，每种定位方式都有其特定的使用场景。粘性定位特别适合创建始终可见的导航栏、侧边栏或重要提示信息。</p>
          
          <h3>多列布局的文本处理</h3>
          <p>多列布局专门用于处理长文本内容的展示。它模仿了传统印刷品的排版方式，让内容在多个列之间自动流动。这种布局方式特别适合博客文章、新闻网站和文档页面。</p>
          
          <h3>响应式设计的重要性</h3>
          <p>无论使用哪种布局技术，响应式设计都是现代网页开发的核心要求。通过媒体查询、相对单位和弹性布局，可以确保网站在各种设备上都能提供良好的用户体验。</p>
          
          <p>掌握这些CSS布局技术，结合现代开发工具和最佳实践，将帮助你创建出既美观又功能强大的网页界面。</p>
        </div>
      </section>

      <footer>
        <div class="footer-content">
          <p>纯CSS布局技术展示作品集 &copy; 2023</p>
          <div class="footer-links">
            <a href="#">GitHub</a>
            <a href="#">CodePen</a>
            <a href="#">LinkedIn</a>
            <a href="#">Twitter</a>
          </div>
          <p>探索、学习和掌握现代CSS布局技术 | 不使用任何JavaScript或第三方库</p>
        </div>
      </footer>
  </body>
</html>
